
<template>
    <!-- 结算中心/快递涨价结算规则 -->
    <div class="expressPriceIncreaseRule">
        <div class="top_operation">
            <!-- 顶部四级联动选择器联动组件 -->
            <TopSelect
                ref="topSelect"
                @headChange="getHeadId"
                :isRegionShow="isRegionShow"
                @regionChange="getRegionId"
                :isCityShow="isCityShow"
                @cityChange="getCityId"
                :isWareShow="isWareShow"
                @wareChange="getWareId"
            ></TopSelect>
            <div class="every_operation">
                <span>类型：</span>
                <a-select style="width: 195px" @change="handleChange" v-model="type" allowClear>
                    <a-select-option value="类型">
                        类型
                    </a-select-option>
                </a-select>
            </div>

            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>

        <div class="add_btn">
            <a-button type="primary" icon="import" >导入</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" >批量删除</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" >启用</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" >禁用</a-button>
            <a-button style="margin-left:20px;" v-if="deletdBtnShow" >导出</a-button>
            <a-button type="primary" icon="export" style="margin-left:20px;" >下载模板</a-button>
        </div>

        <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div>

        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    >
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <!-- <span style="margin-right:8px;" @click="editDrawer(record)">修改</span> -->
                        <span @click="showModal(record)">删除</span>
                    </a>
                </a-table>

                <!-- 确认删除对话框 -->
                <a-modal v-model="editVisible" title="确认删除" @ok="handleOk">
                    <p style="text-align:center;">确认删除？</p>
                </a-modal>
                
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            dataIndex: 'serialNumber',
            key: 'serialNumber',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '结算规则',
            dataIndex: 'code',
            key: 'code',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '状态',
            dataIndex: 'warehouse',
            key: 'warehouse',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '类型',
            dataIndex: 'contacts',
            key: 'contacts',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '创建时间',
            dataIndex: 'telephone',
            key: 'telephone',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '创建人',
            dataIndex: 'email',
            key: 'email',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改时间',
            dataIndex: 'address',
            key: 'address',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '修改人',
            dataIndex: 'updateBy',
            key: 'updateBy',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '项目备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: '', 
            key: 'x', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
        },
    ];

    import TopSelect from '../../meter/TopSelect'
    import BottomPagination from '../../meter/BottomPagination'
    export default {
        name: 'expressPriceIncreaseRule',
        components: {
            TopSelect,
            BottomPagination
        },
        data () {
            return {
                type: '',
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                pageNo: 1,
                pageSize: 10,
                total: 0,
                editVisible: false,
            }
        },
        methods: {
            // 选择器
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 搜索
            onSearch() {
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    // this.getREList()
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.$refs.topSelect.onReset()
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取当前总部id
            getHeadId(data) {
                this.headquartersId = data
            },
            // 获取当前大区id
            getRegionId(data) {
                this.regionId = data
                this.$refs.topSelect.clearRegion()
            },
            // 获取当前城市id
            getCityId(data) {
                this.cityId = data
                this.$refs.topSelect.clearCity()
            },
            // 获取当前仓库id
            getWareId(data) {
                this.organizeId = data
                this.pageNo = 1
                this.pageSize = 10

                // 当大区、城市、仓库都存在且都只有一个的时候自动请求列表
                if( this.regionId && this.cityId && this.organizeId ){
                    // this.getREList()
                }
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                // this.getREList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                // this.getREList()
            },
            // 确认删除对话框
            showModal(record) {
                this.editVisible = true;
                this.ids = record.id
            },
            // 确认删除
            handleOk(e) {
                this.editVisible = false;
                // let params = {
                //     ids: this.ids,
                // }
                // deleteRE(params).then((res)=>{
                //     if(res.success){
                        
                //     }else{
                //         this.$message.warning(res.message)
                //     }
                // })
            },
        }
    }
</script>

<style lang="less" scoped>
    .expressPriceIncreaseRule {
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }
        }
    }
</style>
